<template>
  <div>
    <div class="map-tady-head">
      <common-card title="关键词搜索"></common-card>
    </div>
    <div class="map-tady-head-below">
      <div class="map-tady-head-surface">
        <common-card title="搜索用户数" value="93,634">
          <v-chart :options="getOptions()" />
        </common-card>
      </div>
      <div class="map-tady-head-surface2">
        <common-card title="搜索量" value="198,782">
          <v-chart :options="getOption()" />
        </common-card>
      </div>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" height="250%">
        <el-table-column fixed prop="date" label="排名" width="150">
        </el-table-column>
        <el-table-column prop="province" label="关键词" width="120">
        </el-table-column>
        <el-table-column prop="zip" label="总搜索量" width="120">
        </el-table-column>
        <el-table-column prop="city" label="搜索用户数" width="120">
        </el-table-column>
        <el-table-column prop="city" label="地址" width="300">
        </el-table-column>
      </el-table>
      <div class="map-bottom">
        <el-pagination background small layout="prev, pager, next" :total="100">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import commonCardMixins from '../mixins/commonCardMixins.JS'
export default {
  mixins: [commonCardMixins],
  methods: {
    getOptions () {
      return {
        xAxis: {
          type: 'category',
          // 每一个分类的数据
          data: [],
          // 隐藏X轴的数据
          show: false,
          // 图标默认是对两边的轴有间距的 设置为false，可以让间距消失
          boundaryGap: false
        },
        yAxis: {
          // 隐藏Y轴的数据
          show: false
        },
        series: [{
          type: 'line',
          // 绘图的数据
          data: [620, 432, 220, 534, 790, 430, 220, 320],
          // 显示面积
          areaStyle: {
            color: 'purple'
          },
          // 隐藏折线 -- 但是每个峰值的点(item)还在
          lineStyle: {
            width: 0
          },
          // 隐藏items
          itemStyle: {
            opacity: 0
          },
          // 显示的更平缓
          smooth: true
        }],
        // 调整位置
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: '10px'
        }
      }
    },
    getOption () {
      return {
        xAxis: {
          type: 'category',
          // 每一个分类的数据
          data: [],
          // 隐藏X轴的数据
          show: false,
          // 图标默认是对两边的轴有间距的 设置为false，可以让间距消失
          boundaryGap: false
        },
        yAxis: {
          // 隐藏Y轴的数据
          show: false
        },
        series: [{
          type: 'line',
          // 绘图的数据
          data: [620, 432, 120, 534, 590, 430, 320, 720],
          // 显示面积
          areaStyle: {
            color: 'purple'
          },
          // 隐藏折线 -- 但是每个峰值的点(item)还在
          lineStyle: {
            width: 0
          },
          // 隐藏items
          itemStyle: {
            opacity: 0
          },
          // 显示的更平缓
          smooth: true
        }],
        // 调整位置
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: '10px'
        }
      }
    }
  },
  data () {
    return {
      tableData: [{
        date: '1',
        province: '上海',
        city: '普陀区',
        zip: 200333
      }, {
        date: '2',
        province: '上海',
        city: '普陀区',
        zip: 200333
      }, {
        date: '3',
        province: '上海',
        city: '普陀区',
        zip: 200333
      }, {
        date: '4',
        province: '上海',
        city: '普陀区',
        zip: 200333
      }]
    }
  }
}
</script>
<style scoped lang="scss">
.map-tady-head {
  height: 100px;
}

.map-tady-head-below {
  display: flex;

  .map-tady-head-surface {
    width: 50%;
    height: 50%;
  }

  .map-tady-head-surface2 {
    width: 50%;
    height: 50%;
  }
}

.map-bottom {
  margin-left: 200px;
  margin-top: 10px;
}
</style>
